var layer, laypage,form;
layui.config({
    base : "/js/"
}).use(['form','layer','laypage'],function() {
    form = layui.form();
    layer = parent.layer === undefined ? layui.layer : parent.layer;
    laypage = layui.laypage;
    //全选
    form.on('checkbox(allChoose)', function(data){
        var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
        child.each(function(index, item){
            item.checked = data.elem.checked;
        });
        form.render('checkbox');
    });
})
var pageComponent = Vue.component('page', {
    props: {
        'selected': {'type': Boolean},
        'selectedParam': {},
        'headList': {'type': Array},
        'param': {},
        'url': '',
        },
    data: function () {
        this.page(1)
        return {
            dataList: [],
            selectedList: []
        }
    },
    template: '' +
    '<div>'+
    '   <div class="layui-form">'+
    '   	<table class="layui-table">'+
    '          <thead>'+
    '   			<tr>'+
    '   				<th v-if="selected"><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th>'+
    '   				<th v-for="head in headList">{{ head.value }}</th>'+
    '   			</tr> '+
    '   		</thead>'+
    '   		<tbody>' +
    '              <tr v-for="(data, dIndex) in dataList">' +
    '                  <td v-if="selected"><input type="checkbox" name="obj" v-model="selectedList" v-bind:value="data[selectedParam.checked]" lay-skin="primary" lay-filter="obj"></td>' +
    '                  <td v-for="(head, hIndex) in headList">' +
    '                       <label v-if="head.type === \'icon\'" v-html="analysis(data, head)"></label>' +
    '                       <label v-else>{{ analysis(data, head) }}</label>' +
    '                   </td>' +
    '              </tr>' +
    '          </tbody>'+
    '   	</table>'+
    '   </div>'+
    '   <div id="page"></div>' +
    '   <div>{{selectedList}}</div>' +
    '</div>',
    methods: {
        analysis: function (data, head) {
            if(head.key.indexOf('.')){
                var keyArray = head.key.split('.');
                var temp = new Object();
                for(i = 0; i < keyArray.length; i++){
                    if(i == 0){
                        temp = data[keyArray[i]];
                    }else {
                        temp = temp[keyArray[i]];
                    }
                }
                return head.format != null?head.format(temp):temp;
            }else {
                return head.format != null?head.format(data[key]):data[key];
            }
        },
        page: function (curr) {
            var that = this;
            var data = that.param;
            data.page = curr;

            $.post(that.url, data, function (pageEntity) {
                that.dataList = pageEntity.rows;
                laypage({
                    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: pageEntity.totalPage, //通过后台拿到的总页数
                    curr: curr || 1, //当前页
                    skip: true,
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            that.page(obj.curr);
                        }
                    }
                });
            })
        },
        getSelectedList: function(){
            return this.selectedList;
        }
    },
    updated: function() {
        form.render()
    }
})

